import { StyleSheet, 
    ImageBackground, 
    Text, 
    FlatList,
    ToastAndroid,
    BackHandler,
    View, 
    Image,
    Button,
    Modal,
    TextInput,
    ScrollView,
    Dimensions,
    TouchableOpacity,
    PixelRatio,
    Platform,
    Share,
    Animated
  } from 'react-native';
  import { AntDesign } from '@expo/vector-icons'; 
  import React, { useState,useEffect,useRef } from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator  } from '@react-navigation/native-stack';
  
  const Stack = createNativeStackNavigator ();
  
  const Home = ({navigation})=>{
    const [num,setNum] = useState(0);
    useEffect(()=>{
      console.log(123);
    },[])
    return <View>
        <Text>首页</Text>
        <Text style={{fontSize: 50}}>{num}</Text>
        <Button 
          title='数字加1'
          onPress={()=>{setNum(num+1)}}
        />
        <Button 
          title='详情页'
          onPress={()=>{navigation.navigate('Detail',{id:num})}}
        />
    </View>
  }
  
  const Detail = ({route,navigation})=>{
    
    useEffect(()=>{
      navigation.setOptions({
        title:route.params.id,
        headerBackVisible: false,
        headerRight: ()=>{
          return <AntDesign name="setting" size={24} color="black" />
        },
        headerLeft: ()=>{
          return <Image 
            source={require('./assets/favicon.png')}
          />
        },
        headerTitle: ()=>{
          return <Button 
            title='center'
          />
        },
  
      })
    },[])
    return <Text>详情页{route.params.id}</Text>
  }
  
  export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={
            {
              headerStyle:{
                backgroundColor: '#ccc'
              },
              headerTitleAlign: 'center',
              headerTintColor: 'red',
            }
        }>
          <Stack.Screen 
            name='Home' component={Home} 
            options={
              {
                title: '首页',
              }
            }
          />
          <Stack.Screen 
            name='Detail' component={Detail} 
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }